.component {
  align-items: center;
  background-color: var(--theme-hardware-wallet-status-background-color);
  border: 1px solid var(--theme-hardware-wallet-status-border-color);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 20px;

  .messageWrapper {
    display: flex;
    flex-direction: column;
    font-family: var(--font-light);
    padding-right: 20px;
    .message {
      color: var(--theme-hardware-wallet-status-color);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.38;
      .externalLink {
        font-family: var(--font-light);
        font-size: 16px;
      }
    }
    .secondaryMessage {
      color: var(--theme-hardware-wallet-status-passphrase-label-color);
      line-height: 1.38;
    }
  }

  .checkIcon {
    height: 12px;
    margin-right: 5px;
    object-fit: contain;
    width: 16px;

    svg {
      height: inherit;
      vertical-align: top;
      width: inherit;

      & > g > path {
        stroke-width: 5px;
      }
    }
  }

  .clearIcon {
    flex-shrink: 0;
    height: 14px;
    margin-right: 6px;
    object-fit: contain;
    width: 14px;
  }

  &.isReady {
    border: 1px solid var(--theme-hardware-wallet-status-ready-color);
  }

  &.isError {
    border: 1px solid var(--rp-theme-color-error);
  }

  :global {
    .LoadingSpinner_component.hardwareWalletProcessProgress {
      flex-shrink: 0;
      height: 24px;
      margin: 0 !important;
      width: 24px;

      .LoadingSpinner_icon svg path {
        fill: var(--theme-hardware-wallet-message-color) !important;
        opacity: 0.3;
      }
    }
  }
}
